<!-- LocationsSelector -->

<script id="otp-tripOptions-locations" type="text/html">

    <div style="width: 2.5em; float:left;">
        <div style="height: 2em;">{{start}}:</div>
        <div>{{end}}:</div>
    </div>
        
    <div class="notDraggable" style="position: relative; margin-left: 4em; height: 3.6em; overflow: hidden;">
        <div style="position: absolute; left:0px; right: 30px; height: 20px;">
            <div style="position: absolute; left:0px; right: 16px; top:1px; bottom: 0px;">
                <input id="{{widgetId}}-start" class="borderBox otp-tripOptions-loc-input">
            </div>
            <div style="position: absolute; top:0px; bottom: 0px; right: 0px; width: 16px;">
                <button id="{{widgetId}}-startDropdown" class="borderBox otp-tripOptions-loc-dropdownBtn">&#x25BC;</button>
            </div>
        </div>
        <div style="position: absolute; top: 1.8em; left:0px; right: 30px; height: 20px;">
            <div style="position: absolute; left:0px; right: 16px; top:1px; bottom: 0px;">
                <input id="{{widgetId}}-end" class="borderBox otp-tripOptions-loc-input">
            </div>
            <div style="position: absolute; top:0px; bottom: 0px; right: 0px; width: 16px;">
                <button id="{{widgetId}}-endDropdown" class="borderBox otp-tripOptions-loc-dropdownBtn">&#x25BC;</button>
            </div>
        </div>
        <div style="position: absolute; top: 10px; right:0px; width: 20px; height: 20px; background: red;">
            <button id="{{widgetId}}-reverseButton" class="otp-tripOptions-loc-reverseBtn"><img src="images/reverse.png" /></button>
        </div>
    </div>

    <div style="clear:both;"></div>

    {{#showGeocoders}}
        <div style="margin-top:5px;">
            {{geocoder}}:
            <select id="{{widgetId}}-selector">
                {{#geocoders}}
                     <option>{{name}}</option>
                {{/geocoders}}
            </select>
        </div>            
    {{/showGeocoders}}
    
</script>


<!-- TimeSelector -->

<script id="otp-tripOptions-timeSelector" type="text/html">

    <div id="{{widgetId}}-timeSelector" class="notDraggable">

        <select id="{{widgetId}}-depArr">
            <option>{{depart}}</option>
            <option>{{arrive}}</option>
        </select>
        
        <input type="text" id="{{widgetId}}-time" class="otp-time-input" />
        <input type="text" id="{{widgetId}}-date" class="otp-date-input" />
        <button id="{{widgetId}}-nowButton">{{now}}</button>        
    </div>

</script>

<!-- WheelchairSelector -->

<script id="otp-tripOptions-wheelchair" type="text/html">

    <div class="notDraggable">
        {{label}} &nbsp;
		<input type="checkbox" id="{{widgetId}}-wheelchair-input" />
    </div>

</script>

<!-- Debug Itineraries Filter -->
<script id="otp-tripOptions-debug-filters" type="text/html">
    <div class="notDraggable">
        {{label}} &nbsp;
         <input type="checkbox" id="{{widgetId}}-debug-filters-input" />
    </div>
</script>


<!-- MaxDistanceSelector -->

<script id="otp-tripOptions-maxDistance" type="text/html">

    <div class="notDraggable">
        {{label}} <input id="{{widgetId}}-value" type="text" style="width:35px;" value="{{currentMaxDistance}}" /> {{distSuffix}}&nbsp;
        <select id="{{widgetId}}-presets"><option>{{presets_label}}:</option>
            {{#presets}}
                <option>{{.}} {{distSuffix}}</option>
            {{/presets}}
        </select>
    </div>
        
</script>


<!-- PreferredRoutesSelector -->

<script id="otp-tripOptions-preferredRoutes" type="text/html">

    <div class="notDraggable">
        <div style="float:right; font-size: 12px;">
            <button id="{{widgetId}}-button">{{edit}}…</button>
        </div>
        {{preferredRoutes_label}}: <span id="{{widgetId}}-list">({{none}})</span>
        <div style="clear:both;"></div>
    </div>
    
    <div class="otp-tripViewer-select notDraggable" style="margin-top: 8px;" >
        <div style="float: left;">{{weight}}:</div>
        <div style="margin-left:80px;">
            <div id="{{widgetId}}-weightSlider" style="width:90%" />
        </div>
    </div>
    
</script>


<!-- RoutesSelector Widget-->

<script id="otp-tripOptions-routesSelector" type="text/html">

    <div>
        <div style="float:left">
            {{allRoutes}}:<br>
            <select id="{{widgetId}}-routeList" size=6 class="otp-preferredRoutesSelectorWidget-list notDraggable">
            </select>
        </div>
        
        <div style="float:right">{{name}}<br>
            <select id="{{widgetId}}-selectedList" size=6 class="otp-preferredRoutesSelectorWidget-list notDraggable">
            </select>
        </div>

        <div class="otp-preferredRoutesSelectorWidget-middle">
            <button id="{{widgetId}}-addButton" style="margin-bottom: 5px;">&gt;</button><br>
            <button id="{{widgetId}}-removeButton">&lt;</button><br>
        </div>
        
        <div style="clear:both;" /></div>
    </div>

    <div class="otp-preferredRoutesSelectorWidget-buttonRow">
        <button id="{{widgetId}}-saveButton">{{save}}</button>&nbsp;
        <button id="{{widgetId}}-closeButton">{{close}}</button>
    </div>

</script>
